<template>
  <div class="goodlist">
    <a class="item clear"
       href="javascript:void(0);"
       v-for="(item,index) in this.$store.state.datalist"
       :key="index"
       :data-index="item.good_id"
       @click="push(item)">
      <div class="item-left">
        <img :src="item.src"
             alt />
      </div>
      <div class="item-right">
        <p v-text="item.name"></p>
        <ul class="tag">
          <li v-for="(val,index1) in item.tag"
              :key="index1"
              v-text="val"></li>
        </ul>
        <div class="priceBox">
          <b>￥{{item.price}}</b>
          <span>免息分期</span>
        </div>
        <div class="commentCount">
          <span>{{item.commentCount}}评价</span>
        </div>
      </div>
    </a>
  </div>
</template>
<script>
export default {
  methods: {
    getUi (page, type) {
      let goods = {
        page,
        type
      };
      this.$store.commit("getGoods", goods);
    },
    push (item) {
      this.$router.push({ path: "/details", query: item });
    }
  },
  created () {
    this.getUi(this.$store.state.page, this.$store.state.type);
  }
};
</script>
<style scoped>
.goodlist {
  width: 100vw;
}
.item {
  display: block;
  padding: 10px 10px 18px;
  box-sizing: border-box;
  position: relative;
}
.item-left {
  float: left;
  width: 100px;
  height: 100px;
}
.item-left img {
  display: block;
  width: 100px;
  height: 100px;
}
.item-right {
  width: 250px;
  float: left;
  overflow: hidden;
  margin-left: 5px;
}
.item-right p {
  line-height: 1.42;
  font-weight: 700;
  color: #333;
  font-size: 0.28rem;
}
.tag {
  display: flex;
}
.tag li {
  display: inline-block;
  line-height: 16px;
  margin-right: 10px;
  font-size: 10px;
  padding: 0 7px;
  color: #9c9c9c;
  height: 16px;
  border-radius: 8px;
  background-color: #f5f5f5;
  overflow: hidden;
}
.priceBox {
  margin-top: 5px;
  font-size: 16px;
  align-items: center;
  color: #f21c1c;
}
.priceBox span {
  line-height: normal;
  font-size: 12px;
  border: 1px solid #f21c1c;
  border-radius: 8px;
  margin-left: 3px;
}
.commentCount {
  color: #9c9c9c;
  font-size: 12px;
  line-height: 1.5;
}
</style>